<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<form id="uploadAndCropImageForm" action="createCard-cropImage.htm" method="POST" enctype="multipart/form-data">
<s:include value="cardCreateBeanInclude.jsp" />
<s:hidden name="x1" id="x1"/>
<s:hidden name="y1" id="y1"/>
<s:hidden name="w1" id="w1"/>
<s:hidden name="h1" id="h1"/>
<s:set id="pictureFileName" value="cardCreateBean.order.masterMember.mmbPicturePath" />
<table width="722" border="0" cellpadding="0" cellspacing="0" class="bg2">
	<tr>
		<td width="100%" valign="top">
			<table width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
  				<tr>
    				<td class="font02">ขั้นตอนที่ 2.1 รูปภาพถ่าย</td>
                </tr>
			</table>
			<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="font03">
				<tr>
					<td>1. กรุณาเลือกรูปภาพถ่ายของท่านที่ต้องการ</td>
                </tr>
                <tr>
					<td>2. คลิกกำหนดกรอบ ที่ตัวรูปภาพ</td>
                </tr>
                <tr>
					<td>3. คลิกปุ่ม ขั้นตอนต่อไปเพื่อกลับสู่ขั้นตอนที่ 2</td>
                </tr>
                <tr>
                  	<td>&nbsp;</td>
                </tr>
			</table>
			<%--
            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  	<td width="50%">&nbsp;</td>
                  	<td width="50%" align="right">
                  		<a href="createCard-fillData.htm?stepBack=Y" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','${ imageBase }/b_back2.gif',1)">
                  			<img src="${ imageBase }/b_back1.gif" title="ย้อนกลับ" name="Image7" width="126" height="33" id="Image7">
                  		</a>
                  		<input type="image" src="${ imageBase }/b_next1.gif" title="ขั้นตอนต่อไป" name="next01" width="126" height="33" id="next01" 
                  			onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next01','','${ imageBase }/b_next2.gif',1)" />
                  	</td>
                </tr>
            </table>
            --%>
		</td>
	</tr>
	<tr>
		<td height="236">
			<table width="315" border="0" align="center" cellpadding="0" cellspacing="0">
           		<tr>
               		<td height="20" colspan="2" class="font01_2">ไฟล์รูปภาพจะต้องเป็นนามสกุล *.jpg | *.jpeg | *.png ที่ชัดเจนเท่านั้น</td>
          		</tr>
           		<tr>
               		<td height="20" colspan="2" align="center">
						<%
							System.out.println("JSP: "+session.getAttribute("SESSION_CARDCREATEBEAN"));
						%>
						<s:if test="%{#pictureFileName neq null}">
						<s:url id="imageUrl" value="%{'images/image.htm'}" escapeAmp="false">
							<s:param name='name' value='%{#pictureFileName}' />
							<s:param name='isTemp' value='%{"Y"}' />
							<s:param name="timestamp" value="%{(new java.util.Date()).getTime()}"/>
						</s:url>
						<img src="<s:property value="#imageUrl"/>" id="imgCrop" height="180"/>
					
						<script language="JavaScript">
						function doCrop(c){
							$j("#x1").val(c.x);
							$j("#y1").val(c.y);
							$j("#w1").val(c.w);
							$j("#h1").val(c.h);
						}
						$j("#imgCrop").Jcrop({
					        onChange: doCrop,
					        onSelect: doCrop,
					        aspectRatio: 6.3 / 8
					      });
						</script>
						</s:if>
               		</td>
           		</tr>
           		<tr>
              		<td width="75" height="40" class="font05">* รูปภาพ</td>
               		<td width="240" class="font05">
               			<label for="mmbPicture"></label>
               			<s:file name="mmbPicture" id="mmbPicture" onchange="onPickFileChange()"></s:file>
               		</td>
           		</tr>
           	</table>
            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  	<td width="50%">&nbsp;</td>
                  	<td width="50%" align="right">
                  		<a href="createCard-fillData.htm?stepBack=Y" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','${ imageBase }/b_back2.gif',1)">
                  			<img src="${ imageBase }/b_back1.gif" title="ย้อนกลับ" name="Image7" width="126" height="33" id="Image7">
                  		</a>
                  		<input type="image" src="${ imageBase }/b_next1.gif" title="ขั้นตอนต่อไป" name="next01" width="126" height="33" id="next01" 
                  			onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next01','','${ imageBase }/b_next2.gif',1)" />
                  	</td>
                </tr>
            </table>
		</td>
	</tr>
</table>
</form>
<script language="javascript">
function onPickFileChange(){
	if(validateFileType()){
		$j('#uploadAndCropImageForm').attr('action','createCard-uploadImage.htm');
		$j('#uploadAndCropImageForm').submit();
	}else{
		$j('#uploadAndCropImageForm').each(function(){
		    this.reset();
		});
	}
}
function emptyFile(){
	if($j('#mmbPicture').size()>0 && $j('#mmbPicture').val()==""){
		return true;
	}
	return false;
}
function validateFileType(){

	if(!emptyFile()){
		var ext = $j('#mmbPicture').val().split('.').pop().toLowerCase();
		if($j.inArray(ext, ['png','jpg','jpeg']) == -1) {
		    alert('ไฟล์รูปภาพจะต้องเป็นนามสกุล *.jpg | *.jpeg | *.png เท่านั้น');
		    return false;
		}
	}
	return true;
}
</script>